<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>照片库</title>
    <link rel="stylesheet" href="phontstyle.css">
</head>
<body>
    <h1>照片库实例</h1>
    <div class="full-img">
        <img class="displayed-img" src="pic1.jpg"/>
        <!-- 设置一层蒙版 -->
        <div class="overlay"></div>
        <button class="dark">变暗</button>
    </div>
    <!-- 缩略图选择条 -->
    <div class="thumb-bar"></div>

</body>
</html>

<script>
    const thumbBar = document.querySelector('.thumb-bar');
    const overlay = document.querySelector('.overlay');
    const displayedImg = document.querySelector('.displayed-img');
    /** @type {HTMLInputElement} */
    const button = document.querySelector('.dark');
    let darked = false;// 定义一个布尔类型，保存变暗或变量的参数

    // 遍历一遍，将图片全部存入thumbBar
    for(let i=0;i<5;i++){
        const img = document.createElement('img');
        let imgSrc = 'pic' + (i+1) + '.jpg';
        img.src = imgSrc;
        thumbBar.appendChild(img);
    }

    thumbBar.onclick = function(e){
        const eventImg = e.target;
        console.log(e.target);
        displayedImg.src = eventImg.src;
    };
    button.onclick = function(e){
        if(darked){
            // 亮，设置不透明度为0
            button.textContent = '变暗';
            darked = false;
            overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)';
        }else{
            // 暗，设置不透明度为0.5
            button.textContent = '变亮';
            darked = true;
            overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
        }
    };
</script>